<template>
	<view class="">
		<PopCard :show='showUserList' title='切换就诊卡' @close='onClose("showUserList")'>
			<view slot='content' class="user-list">
				<view class="user flexR" v-for="(item, i) in userList" :key='i' :class="item.checked?'active':''"
					@click="selectUser(item,i)">
					<text>{{item.name}}</text>
					<tkiQrcodeVue ref="qrcode" onval :val="item.patId" :size="300" :load-make="true"
						:show-loading="false" />
				</view>
			</view>
		</PopCard>
		<PopCard :show='showCode' :title='titleList.length===1?titleList[0].name:""' @close='onClose("showCode")'>
			<view slot='content' class="code" v-if="userInfo">
				<Tabs v-if="titleList.length>1" :list="titleList" :current="current" @handleChange="change" />
				<view class="component" v-if="current===1">
					<view class="name">
						{{userInfo.name}}
					</view>
					<!-- 		<view class="card-number">
						{{userInfo.ehcId}}
					</view> -->
					<view class="center mar-15">
						<tkiQrcodeVue ref="qrcode" onval :val="userInfo.ehcId" :size="300" :load-make="true"
							:show-loading="false" />
					</view>
					<!-- 		<view class="tip">
						在就医缴费时请将此卡出示给相关医师
					</view> -->
				</view>
				<view class="component" v-if="current===0">
					<view class="name">
						{{userInfo.name}}
					</view>
					<!-- 				<view class="card-number">
						{{userInfo.cardNo}}
					</view> -->
					<view class="center mar-15">
						<tkiQrcodeVue ref="qrcode" onval :val="userInfo.patId" :size="300" :load-make="true"
							:show-loading="false" />
					</view>
				</view>
			</view>
		</PopCard>
	</view>
</template>

<script>
	import PopCard from '../PopCard/index.vue'
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	import tkiBarcode from '../BarCode/tki-barcode.vue'
	import tkiQrcode from '../QrCode/tki-qrcode.vue'
	import Tabs from '../Tabs/index.vue'
	import tkiQrcodeVue from '../../components/QrCode/tki-qrcode.vue'
	export default {
		components: {
			PopCard,
			tkiQrcode,
			tkiBarcode,
			Tabs,
			tkiQrcodeVue
		},
		props: {
			showUserList: {
				type: Boolean,
				default: false
			},
			showCode: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				current: 0,
				barOpations: {
					displayValue: false
				}
			}
		},
		computed: {
			...mapGetters(['userInfo', 'userId', 'userList']),
			titleList() {
				return [{
					name: '就诊卡二维码'
				}, {
					name: "电子健康卡二维码"
				}]
			},
		},
		// filters: {
		// 	encryption(val) {
		// 		if (val) {
		// 			const len = val.length
		// 			let str = ''
		// 			for (let i = 0; i < len - 6; i++) {
		// 				str += "*"
		// 			}
		// 			return val.substr(0, 3) + str + val.substr(len - 3)
		// 		} else {
		// 			return ''
		// 		}
		// 	}
		// },
		mounted() {
			// console.log(this.userInfo)
			console.log(this.userList)
		},
		methods: {
			...mapActions(['changeUser']),
			// ...mapGetters(["userId"]),
			selectUser(val, i) {
				if (this.userInfo.patId == val.patId) {
					console.log("不能对自己进行切换")
					return;
				}
				this.changeUser(val.patId).then(data => {
					this.$emit('close', 'showUserList')
				}).catch(e => {
					this.$emit('close', 'showUserList')
				})
			},
			change(index) {
				this.current = index;
			},
			onClose(type) {
				if (type === 'showCode') {
					this.current = 0
				}
				this.$emit('close', type)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user-list {
		padding: 20rpx;
		margin-bottom: 28rpx;

		.user {
			margin-top: 28rpx;
			height: 110rpx;
			align-items: center;
			padding: 0 26rpx;

			>text {
				margin-right: 30rpx;
				font-size: 34rpx;
				color: $text-color;
			}

			>text:first-child {
				min-width: 100rpx;
				display: inline-block;
			}
		}

		.active {
			background-color: #c5f6f1;
			border: 3rpx solid #3EE1D1;
		}
	}

	.code {
		padding: 28rpx 28rpx 50rpx 28rpx;

		.component {
			text-align: center;
			height: 540rpx;

			.name {
				margin-top: 66rpx;
				font-size: 36rpx;
				color: $text-color;
			}

			.card-number {
				margin-top: 22rpx;
				font-size: 33rpx;
				color: $text-color-grey;
			}

			.component-code {
				margin-top: 30rpx;
				// border: 1px dashed #000000;
				padding: 16rpx 10rpx;

				image {
					width: 100% !important;
				}
			}

			.component-qr {
				margin: 30rpx auto 0 auto;
				// border: 1px dashed #000000;
				padding: 4rpx;
				display: inline-block;
				align-items: center;
				justify-content: center;
			}

			.tip {
				margin-top: 50rpx;
				font-size: 27rpx;
				color: $text-color-grey;
			}
		}
	}
</style>
<style lang="scss">
	.component-code {
		.tki-barcode {
			image {
				width: 100%;
				height: 60px !important;
			}
		}
	}
</style>